import {
  Form,
  Select,
  FormInstance,
  Input
} from 'antd';
import { LabeledValue } from 'antd/lib/select';

const { Option } = Select;

/** 姓名 */
export const Name = ({
  form
}: {
  form: FormInstance<any>
}) => {
  const checkName = (curName?: string) => new Promise((resolve, reject) => {
    if (curName === undefined || curName === '') {
      reject(new Error('请输入姓名'));
    }

    if ((curName?.length ?? 20) >= 20) {
      reject(new Error('请输入正确的姓名'));
    }

    resolve('');
  });

  return (
    <Form.Item
      name="name"
      label="姓名"
      validateTrigger={['onBlur']}
      rules={[
        {
          validator: (rule, value, callback) => {
            checkName(value).then(() => {
              callback();
            })
              .catch((error) => {
                callback(error);
              });
          },
          validateTrigger: 'onBlur'
        },
      ]}
    >
      <Input
        style={{ width: 350 }}
        onChange={(e) => {
          form.setFieldsValue({ name: e.target.value });
        }}
      />
    </Form.Item>
  );
};

/**  */
export const Num = ({
  form
}: {
  form: FormInstance<any>
}) => {
  const checkNum = (num?: string) => new Promise((resolve, reject) => {
    if (num === undefined || num === '') {
      reject(new Error('请输入工号'));
    }

    if ((num?.length ?? 30) >= 30) {
      reject(new Error('请输入正确的工号'));
    }

    resolve('');
  });

  return (
    <Form.Item
      name="num"
      label="工号"
      validateTrigger={['onBlur']}
      rules={[
        {
          validator: (rule, value, callback) => {
            checkNum(value).then(() => {
              callback();
            })
              .catch((error) => {
                callback(error);
              });
          },
          validateTrigger: 'onBlur'
        },
      ]}
    >
      <Input
        style={{ width: 350 }}
        onChange={(e) => {
          form.setFieldsValue({ num: e.target.value });
        }}
      />
    </Form.Item>
  );
};

/** 工作单位 */
export const WorkUnit = (
  {
    workUnit,
    form
  }: {
    workUnit: AnswerSetting.SelectOption[],
    form: FormInstance<any>
  }
) => (
  <Form.Item
    name="workUnit"
    label="工作单位"
    rules={[
      {
        required: true,
        message: '请选择工作单位！',
      },
    ]}
  >
    <Select
      placeholder="请选择"
      style={{ width: 350 }}
      onSelect={(
        value: LabeledValue
      ) => {
        form.setFieldsValue({ workUnit: value });
      }}
    >
      {workUnit.map(({ name, uuid }) => (
        <Option key={uuid} value={name}>{name}</Option>
      ))}
    </Select>
  </Form.Item>
);

/** 附属单位 */
export const Affiliated = (
  {
    affiliatedUnit,
    form
  }: {
    affiliatedUnit: AnswerSetting.SelectOption[],
    form: FormInstance<any>
  }
) => (
  <>
    <Form.Item
      name="affiliated"
      label="附属单位"
      rules={[
        {
          required: true,
          message: '请选择附属单位！',
        },
      ]}
    >
      <Select
        style={{ width: 350 }}
        placeholder="请选择"
        onSelect={(
          value: LabeledValue
        ) => {
          form.setFieldsValue({ affiliatedUnit: value });
        }}
      >
        {affiliatedUnit.map(({ name, uuid }) => (
          <Option key={uuid} value={name}>{name}</Option>
        ))}
      </Select>
    </Form.Item>
  </>
);

/** 工作职位 */
export const JobPosition = (
  {
    jobPosition,
    form
  }: {
    jobPosition: AnswerSetting.SelectOption[],
    form: FormInstance<any>
  }
) => (
  <>
    <Form.Item
      name="jobPosition"
      label="工作职位"
      rules={[
        {
          required: true,
          message: '请选择工作职位！',
        },
      ]}
    >
      <Select
        style={{ width: 350 }}
        placeholder="请选择"
        onSelect={(
          value: string
        ) => {
          form.setFieldsValue({ jobPosition: value });
        }}
      >
        {jobPosition.map(({ name, uuid }) => (
          <Option key={uuid} value={name}>{name}</Option>
        ))}
      </Select>
    </Form.Item>

  </>
);

/** 工作岗位 */
export const OperatingPost = (
  {
    operatingPost,
    form
  }: {
    operatingPost: AnswerSetting.SelectOption[],
    form: FormInstance<any>
  }
) => (
  <>
    <Form.Item
      name="operatingPost"
      label="工作岗位"
      rules={[
        {
          required: true,
          message: '请选择工作岗位！',
        },
      ]}
    >
      <Select
        style={{ width: 350 }}
        placeholder="请选择"
        onSelect={(
          value: string
        ) => {
          form.setFieldsValue({ operatingPost: value });
        }}
      >
        {operatingPost.map(({ name, uuid }) => (
          <Option key={uuid} value={name}>{name}</Option>
        ))}
      </Select>
    </Form.Item>
  </>
);
